<template>
  <div class="bg-white">
    <Tabs v-model:activeKey="activeKey" type="card">
      <TabPane v-if="checkPowerByName('onlineUserDataView')" key="1" tab="在线用户数据视图">
        <Card>
          <SearchForm @get="getFormParams" :activeKey="activeKey"></SearchForm>
        </Card>
        <div v-if="activeKey === '1'" class="md:flex flex-wrap">
          <ChartCard
            class="md:w-3/10 md:h-80 !md:mx-5 !md:my-8"
            v-for="chart in chartList"
            :metricName="chart.tenantName"
            :time="chart.timeList"
            :value="chart.ocCountList"
            :activeKey="activeKey"
            :key="chart.tenantName"
          >
          </ChartCard>
        </div>
      </TabPane>
      <TabPane v-if="checkPowerByName('totalUserDataView')" key="2" tab="总用户数据视图">
        <Card>
          <SearchForm @get="getFormParams" :activeKey="activeKey"></SearchForm>
        </Card>
        <div v-if="activeKey === '2'" class="md:flex flex-wrap">
          <ChartCard
            class="md:w-3/10 md:h-80 !md:mx-5 !md:my-8"
            v-for="chart in totalChartList"
            :metricName="chart.tenantName"
            :time="chart.timeList"
            :value="chart.tcCountList"
            :activeKey="activeKey"
            :key="chart.tenantName"
          ></ChartCard>
        </div>
      </TabPane>
    </Tabs>
  </div>
</template>
<script lang="ts" setup>
import SearchForm from '/@/views/measurement-center/user-statistic/component/searchForm.vue';
import ChartCard from '/@/views/measurement-center/user-statistic/component/chartCard.vue';
import { Card, Tabs, TabPane } from 'ant-design-vue';
import { ref, watch } from 'vue';
import { onlineUserParam } from '/@/api/measurement-center/user-statistic/model/userStatisticModel';
import {
  getOnlineUserStatisticList,
  getTotalUserStatisticList,
} from '/@/api/measurement-center/user-statistic/userStatistic';
import { checkPowerByName } from '../../../utils/permission';

let params1: onlineUserParam = {
  tenantCodeList: [],
  period: 'hour',
  statistic: undefined,
  startDate: new Date(new Date().getTime() + 8 * 60 * 60 * 1000 - 7 * 24 * 60 * 60 * 1000)
    .toJSON()
    .split('T')
    .join(' ')
    .substr(0, 19)
    .split(' ')[0],
  endDate: new Date(new Date().getTime() + 8 * 60 * 60 * 1000)
    .toJSON()
    .split('T')
    .join(' ')
    .substr(0, 19)
    .split(' ')[0],
};
let params2: onlineUserParam = {
  tenantCodeList: [],
  period: 'day',
  statistic: undefined,
  startDate: new Date(new Date().getTime() + 8 * 60 * 60 * 1000 - 7 * 24 * 60 * 60 * 1000)
    .toJSON()
    .split('T')
    .join(' ')
    .substr(0, 19)
    .split(' ')[0],
  endDate: new Date(new Date().getTime() + 8 * 60 * 60 * 1000)
    .toJSON()
    .split('T')
    .join(' ')
    .substr(0, 19)
    .split(' ')[0],
};

const chartList = ref([]);

const totalChartList = ref([]);
let activeKey = ref('1');

//获取form传来的参数，从后端获取chart数据
const getFormParams = async (params) => {
  if (activeKey.value === '1') {
    chartList.value = await getOnlineUserStatisticList(params);
  } else if (activeKey.value === '2') {
    totalChartList.value = await getTotalUserStatisticList(params);
  }
};

//监听activeKey，变化就重新发请求获取
watch(
  () => activeKey.value,
  async (val) => {
    if (val === '1') {
      chartList.value = await getOnlineUserStatisticList(params1);
    } else if (val === '2') {
      totalChartList.value = await getTotalUserStatisticList(params2);
    }
  },
  { immediate: true }
);
</script>
